<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 300px;
            height: 200px;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        ul li {
            float: left;
            width: 300px;
            text-align: center;
        }

        .de {
            text-decoration: line-through;
        }

        .dl {
            color: red;
        }
    </style>
</head>

<body>
    <button id="b1">根据价格排序</button>
    <button id="b2">根据销量排序</button>
    <button id="b3">根据评价排序</button>
    <div>
        <ul id="box">
            <!-- <li><img src="./ip7.jpg" alt="">
                <p>原价：</p>
                <p>现价：</p>
                <p>颜色：</p>
                <p>热度：</p>
                <p>卖出：</p>
            </li> -->
        </ul>
    </div>
    <script>
        window.onload = () => {
            var data = [{
                id: '001',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 5899.00,
                sale: 5888.00,
                color: '土豪金',
                evaluate: 288,
                sales: 1230
            }, {
                id: '002',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 3899.00,
                sale: 998.00,
                color: '黑色',
                evaluate: 289,
                sales: 439
            }, {
                id: '003',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 1999.00,
                sale: 1899.00,
                color: '白色',
                evaluate: 438,
                sales: 908
            }, {
                id: '004',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 5999.00,
                sale: 5808.00,
                color: '土豪金',
                evaluate: 223,
                sales: 986
            }, {
                id: '005',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 3892.00,
                sale: 998.00,
                color: '黑色',
                evaluate: 88,
                sales: 8798
            }, {
                id: '006',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 1929.00,
                sale: 1099.00,
                color: '白色',
                evaluate: 2088,
                sales: 453
            }, {
                id: '007',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 4899.00,
                sale: 2888.00,
                color: '土豪金',
                evaluate: 2880,
                sales: 88
            }, {
                id: '008',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 5876.00,
                sale: 998.00,
                color: '黑色',
                evaluate: 3288,
                sales: 99
            }, {
                id: '009',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 4999.00,
                sale: 1899.00,
                color: '白色',
                evaluate: 1288,
                sales: 645
            }, {
                id: '010',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 5888.00,
                sale: 2899.00,
                color: '土豪金',
                evaluate: 2288,
                sales: 34
            }, {
                id: '011',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 3299.00,
                sale: 978.00,
                color: '黑色',
                evaluate: 28,
                sales: 1213
            }, {
                id: '012',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 1976.00,
                sale: 1899.00,
                color: '白色',
                evaluate: 3243,
                sales: 123
            }];
            let fun = () => {
                for (let i = 0; i < data.length; i++) {

                    box.innerHTML += ` <li>
                <a href="#">
                <img src="./`+ data[i].imgurl + `" alt="">
                <p class="de">原价：`+ data[i].price + `</p>
                <p class="dl">现价：`+ data[i].sale + `</p>
                <p>颜色：`+ data[i].color + `</p>
                <p>好评：`+ data[i].evaluate + `</p>
                <p>卖出：`+ data[i].sales + `</p>
                </a>
            </li>`

                }
            }
            fun();
            b1.onclick = () => {
                box.innerHTML = ""
                data.sort(function (a, b) {
                    return a.sale - b.sale
                });
                fun();
            }
            b2.onclick = () => {
                box.innerHTML = ""
                data.sort(function (a, b) {
                    return b.sales - a.sales
                });
                fun();
            }
            b3.onclick = () => {
                box.innerHTML = ""
                data.sort(function (a, b) {
                    return b.evaluate - a.evaluate
                });
                fun();
            }
        }
    </script>
</body>

</html>